<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <br />
    <b>
      <el-radio-group v-model="searchType">
        <el-radio-button label="斗地主"></el-radio-button>
        <el-radio-button label="杠次"></el-radio-button>
      </el-radio-group>
    </b>
    <br />最后结束时间：
    <el-date-picker
      v-model="searchTime"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <p>{{ detail }}</p>
    <el-button type="primary" @click="getSortList()">计算数据</el-button>

    <!-- 展示内容区域 -->
    <template v-if="isShow">
      <h2>{{ msg }}</h2>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>头像</th>
            <th>userId</th>
            <th>名称</th>
            <th>最终得分</th>
            <th>明细(扣除房费之后的数据)</th>
            <th>赛事源数据</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="index">
            <th scope="row">{{ index + 1 }}</th>
            <td><img :src="item.headimg" alt="木有图片哦" class="img" /></td>
            <td>{{ item.gameuserid }}</td>
            <td>{{ item.formatUserName }}</td>
            <td>{{ item.finalScore }}</td>
            <td>{{ item.score }}</td>
            <td>{{ item.origin }}</td>
          </tr>
        </tbody>
      </table>
    </template>
  </div>
</template>

<script>
import { Message, Loading } from 'element-ui';

export default {
  name: 'App',
  data() {
    return {
      msg: '🍎来一盘游戏结果🍌',
      dataList: [],

      searchType: '斗地主', // 斗地主、杠次
      searchTime: [],
      detail: '时间格式示例： 开始时间：2021-09-21 09:40:19 结束时间：2021-09-21 12:39:15',
      isShow: false,
      isClick: false
    };
  },
  watch: {
    searchType(val) {
      this.isShow = false;
      this.isClick = false;
    }
  },
  methods: {
    async getSortList() {
      const { isClick, searchType, searchTime } = this;
      if (this.isClick) {
        Message('已经在请求啦，请稍等 ....');
        return;
      }
      // 关闭内容显示
      this.isShow = false;
      this.dataList = [];

      const start = +new Date(searchTime[0]);
      const end = +new Date(searchTime[1]);

      console.log(isClick, searchType, searchTime, start, end);

      if (start && end) {
        this.isClick = true;

        const lodaing = Loading.service({
          lock: true,
          text: '请求中，请稍候 ....'
        });

        const type = searchType === '斗地主' ? 'ddz' : 'majiang';
        const reqObj = { type, start, end };
        let res = await this.$axios.post('api/getSortGameList', reqObj).catch(err => {
          Message({ message: '访问服务器出错', type: 'error' });
          lodaing.close();
          this.isClick = false;
        });
        lodaing.close();
        this.isClick = false;
        console.log('res ---->', res.data);
        if (res.data.code === 0) {
          this.dataList = res.data.data;
          this.isShow = true;
        } else {
          Message({ message: '查询出错', type: 'error' });
          return;
        }
      } else {
        this.isShow = false;
        Message({ message: '输入时间格式不正确', type: 'error' });
        this.isClick = false;
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.img {
  width: 50px;
  height: 50px;
}
</style>
